<template>
    <div class="homeimage-container">
      <div class="image-container">
        <div class="background-image"></div>
        <div class="overlay-image"></div>
      </div>
      <div class="text-container">
        <div class="vertical-text bold">Unlock worry-free travel </div>
        <div class="vertical-text bold" >experience with Swiftour</div>
        <div class="small">plan a perfect trip like </div>
        <div class="small">a pro traveller</div>
        <button class="button" @click="goPlan">Start to plan a trip</button>
      </div>
    </div>
  </template>
  
  <script setup>
    import { useRouter } from 'vue-router';
    import { getUser } from '@/utils/auth';
    // import { useStore } from 'vuex';
    import { defineEmits } from 'vue';
    
    import EventBus from "@/utils/event-bus"
const routers =useRouter();
const user = getUser();
// const store = useStore();
const emit = defineEmits();

// function triggerEvent() {
//   emit('triggerEvent', 'Data');
// }

function goPlan() {
  if(!user){
    EventBus.emit("p-click", '父传子文本信息');
    return;
  }
    routers.push("/plan?type=plan")
}
    

  </script>
  
  <style scoped>
    @font-face {
  font-family: 'CustomFont';
  src: url('@/assets/fonts/DejaVuSansMono_0.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
  .homeimage-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 400px;
    width: 100%;
    min-width: 960px;
  }
  
  .image-container {
    position: relative;
    width: 100%;
    height: 400px;
    margin-right: 20px;
  }
  
  .background-image {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('@/assets/explore/img/top-back.jfif'); /* Path to your background image */
    background-size: cover;
    background-position: center;
    clip-path: polygon(0 0, 100% 0, 60% 101%, 0% 100%); /* Adjusted trapezoid with right-top angle 45 degrees and right-bottom angle 145 degrees */
  }
  
  .overlay-image {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('@/assets/explore/img/top.png'); /* Path to your person image */
    background-size: cover;
    background-position: center;
  }
  
  .text-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  
  .vertical-text {
    font-family: 'Outfit', sans-serif;
    color: #000;
  }
  .bold{
    font-size: x-large;
    font-weight: 800;
  }
  .small{
    font-size: larger;
    font-weight: 500;
    color: rgb(112, 112, 112);
  }
  .button {
    margin-top: 30px;
    /* padding: 10px 20px; */
    background-color: darkorange;
    width: 250px;
    height: 50px;
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 25px;
    line-height: 50px;
  }
  
  .button:hover {
    background-color: darkorange;
  }
  </style>